<template>
  <div>
    <div class="i-layout-page-header">
      <h1>列表查询</h1>
      <h3>{{title}}</h3>
    </div>
    <Card>
      <div>
        <div class="search-con search-con-top">
          <Select v-model="searchKey" class="search-col">
            <Option v-for="item in columns" v-if="item.key !== 'action' &&item.key !== 'selection' &&item.key !== 'index'" :value="item.key" :key="`search-col-${item.key}`">{{ item.title }}</Option>
          </Select>
          <Input @on-change="handleClear" clearable placeholder="输入关键字搜索" class="search-input" v-model="searchValue" />
          <Button @click="handleSearch" class="search-btn" type="primary">
            <Icon type="search" />&nbsp;&nbsp;搜索</Button>
          <Poptip confirm title="您确定要删除这些项吗?" @on-ok="handleDeAlete" @on-cancel="cancel">
            <Button v-show="selection.length!=0" style="margin-left: 0.25rem;">删除</Button>
          </Poptip>
          <Button type="primary" @click="modal1 = true" style="float:right;">+ 新增</Button>
          <Modal v-model="modal1" title="创建/修改记录" @on-ok="ok" @on-cancel="cancel">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120">
              <FormItem label="修理厂名称" prop="GarName">
                <Input v-model="formValidate.GarName" placeholder="请输入修理厂名称"></Input>
              </FormItem>
              <FormItem label="联系方式" prop="GarTel">
                <Input v-model="formValidate.GarTel" placeholder="请输入联系方式"></Input>
              </FormItem>
              <FormItem label="联系人" prop="Contact">
                <Input v-model="formValidate.Contact" placeholder="请输入联系人"></Input>
              </FormItem>
              <FormItem label="手机号" prop="Handy">
                <Input v-model="formValidate.Handy" placeholder="请输入手机号"></Input>
              </FormItem>
              <FormItem label="地址" prop="Address">
                <Input v-model="formValidate.Address" placeholder="请输入地址"></Input>
              </FormItem>
              <FormItem label="银行" prop="Bank">
                <Input v-model="formValidate.Bank" placeholder="请输入银行"></Input>
              </FormItem>
              <FormItem label="备注" prop="Remark">
                <Input v-model="formValidate.Remark" placeholder="请输入备注"></Input>
              </FormItem>
              <!-- <FormItem label="Date">
                <Row>
                  <Col span="11">
                  <FormItem prop="date">
                    <DatePicker type="date" placeholder="Select date" v-model="formValidate.date"></DatePicker>
                  </FormItem>
                  </Col>
                  <Col span="2" style="text-align: center">-</Col>
                  <Col span="11">
                  <FormItem prop="time">
                    <TimePicker type="time" placeholder="Select time" v-model="formValidate.time"></TimePicker>
                  </FormItem>
                  </Col>
                </Row>
              </FormItem>
              <FormItem label="Gender" prop="gender">
                <RadioGroup v-model="formValidate.gender">
                  <Radio label="male">Male</Radio>
                  <Radio label="female">Female</Radio>
                </RadioGroup>
              </FormItem>
              <FormItem label="Hobby" prop="interest">
                <CheckboxGroup v-model="formValidate.interest">
                  <Checkbox label="Eat"></Checkbox>
                  <Checkbox label="Sleep"></Checkbox>
                  <Checkbox label="Run"></Checkbox>
                  <Checkbox label="Movie"></Checkbox>
                </CheckboxGroup>
              </FormItem>
              <FormItem label="Desc" prop="desc">
                <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
              </FormItem> -->
              <!--          <FormItem>
                <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
                <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
              </FormItem> -->
            </Form>
          </Modal>

        </div>
      </div>
      <Alert show-icon>
        <strong>已选择 </strong>
        <strong style="color: #2D8CF0;">{{selectNumber}}</strong>
        <strong> 项</strong>
      </Alert>
      <tables ref="selection"  stripe v-model="tableData" :columns="columns" @on-select="handleSelected"
        @on-select-cancel="handleCancle" @on-select-all="handleSelectAll" @on-select-all-cancel="handleUnselectAll" />
      <div style="margin: 10px;overflow: hidden">
        <div style="float: right;">
          <Page :total="total" :current="current" @on-change="changePage"></Page>
        </div>
      </div>

      <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为Csv文件</Button>
    </Card>
  </div>
</template>

<script>
  import Tables from '_c/tables'
  import {
    getTableData
  } from '@/api/data'
  export default {
    name: 'tables_page',
    components: {
      Tables
    },
    data() {
      return {
        tableColumnsChecked: ['ExPlateNum', 'VIC', 'OilCardD'],

        title: "维修站点信息",
        formValidate: {
          GarName: '',
          GarTel: '',
          Contact: '',
          Handy: '',
          Address: '',
          Bank: '',
          Remark: ''
        },
        ruleValidate: {
          GarName: [{
            required: true,
            message: 'The GarName cannot be empty',
            trigger: 'blur'
          }],
          GarTel: [{
             required: true,
             message: 'The GarTel cannot be empty',
             trigger: 'blur'
            }
          ],
          Contact: [{
            required: true,
            message: 'The Contact cannot be empty',
            trigger: 'blur'
          }],
          Handy: [{
            required: true,
            message: 'The Handy cannot be empty',
            trigger: 'blur'
          }],
          Address: [{
              required: true,
              message: 'The Address cannot be empty',
              trigger: 'blur'
            }
          ],
          Bank: [{
            required: true,
            message: 'The Bank cannot be empty',
            trigger: 'blur'
          }],
          time: [{
            required: true,
            message: 'The time cannot be empty',
            trigger: 'blur'
          }],
          Remark: [{
              required: true,
              message: 'The Remark cannot be empty',
              trigger: 'blur'
            }
          ]
        },
        modal1: false,
        selectNumber: 0,
        columns: [{
            type: 'selection',
            width: 30,
            align: 'center',
            fixed: 'left',
            key: 'selection'
          }, {
            type: 'index',
            width: 50,
            align: 'center',
            fixed: 'left',
            key: 'index'
          },
          {
            title: '序号',
            key: 'GarID',
            width: 200,
          },
          {
            title: '修理厂名称',
            key: 'GarName',
            width: 200,
            editable: true
          }, {
            title: '联系方式',
            key: 'GarTel',
            width: 200,
            editable: true
          },
          {
            title: '联系人',
            key: 'Contact',
            width: 200,
          }, {
            title: '手机号',
            key: 'Handy',
            width: 200,
          },
          {
            title: '地址',
            key: 'Address',
            width: 200,
          },
          {
            title: '结算银行账户',
            key: 'Bank',
            width: 200,
          }, {
            title: '备注',
            key: 'Remark',
            width: 200,
          },
          {
            title: '操作',
            fixed: 'right',
            key: 'action',
            width: 80,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.show(params.index)
                    }
                  }
                }, '编辑')
              ]);
            }
          }
        ],
        tableData: [],
        total: 100,
        current: 1,
        selection: [],
        searchValue: '',
        searchKey: ''
      }
    },
    methods: {
      handleSearch() {
        console.log(this.searchKey);
        this.tableData = this.tableData.filter(item => item[this.searchKey].indexOf(this.searchValue) > -1)
      },
      handleClear(e) {
        if (e.target.value === '') this.tableData = this.value
      },
      show(index) {
        console.log(this.tableData[index])
        this.modal1 = true
      },
      ok() {
        this.$Message.info('新增');
      },
      cancel() {
        this.$Message.info('取消');
      },
      handleUnselectAll(selection) {
        this.selection = []
        this.selectNumber = 0
      },
      handleSelectAll(selection) {
        console.log("selection:")
        console.log(selection)
        this.selection = selection;
        this.selectNumber = selection.length
      },
      handleCancle(selection) {
        this.selectNumber = selection.length
        this.selection = selection;
      },
      handleSelected(selection, row) {
        this.selectNumber = selection.length
        this.selection = selection;
        console.log("selection:")
        console.log(selection)
        console.log("row.initRowIndex:")
        console.log(row.initRowIndex)
      },
      handleDeAlete() {

        var index = this.selection.length - 1;
        for (; index >= 0; index--) {
          this.tableData.splice(this.selection[index].initRowIndex, 1);
          console.log(index);
        }
        console.log(this.tableData);
        this.selection = [];
        this.changePage();
      },

      exportExcel() {
        console.log(this.selectNumber);
        this.$refs.selection.exportCsv({
          filename: `table-${(new Date()).valueOf()}.csv`
        })
      },
      changePage() {
        // The simulated data is changed directly here, and the actual usage scenario should fetch the data from the server
        getTableData().then(res => {
          this.tableData = res.data
        })
      }
    },
    mounted() {
      getTableData().then(res => {
        this.tableData = res.data
      });

    }
  }
</script>

<style>
  .i-layout-page-header {
    background-color: #FFF;
    padding: 1.25rem;
    margin-bottom: 1rem;
  }
</style>
